<template>
  <CommonHead  :title="state.msgInfo?.student ? `${state.orderInfo?.order_no}${state.orderInfo?.name}` : '暂无订单'"/>
  <view class="content" v-if="state.msgInfo?.student">
    <view class="title">
      <view class="span">{{state.orderInfo?.order_no}}</view>
      <view class="span span02">修改要求</view>
    </view>
    <view class="line"></view>
    <CommonTitle  :isShowDing="false" :orderInfo="state.orderInfo"/>
    <view class="bottom">
      <view class="tabs">
        <view :class="['item', item.id == state.tabId ? 'itemHover' : '']" v-for="item in state.tabs" :key="item.id" @click="tabChange(item)">{{item.label}}</view>
      </view>
      <view class="msgMain" v-if="state.tabId == 1">
        <view class="formItem" v-for="(item, index) in state.studentMsg" :key="index">
          <view class="label">消息{{convertToChinese(index+1)}}</view>
          <view class="formItemRight">
            <uni-easyinput type="textarea" autoHeight :value="item" placeholder="请输入内容" @blur="changeInput($event,index)" :disabled="state.orderInfo?.status >= 8"/>
          </view>
          <uni-icons type="minus" size="30" class="iconClose" color="rgba(254, 34, 34, 1)" v-if="state.studentMsg?.length > 1 && state.msgInfo?.is_res == 1 && state.orderInfo?.status < 8" @click="deleteFun(index)"></uni-icons>
        </view> 
        <view class="addBtn" @click="studentAdd" v-if="state.msgInfo?.is_res == 1 && state.orderInfo?.status < 8 ">+</view>
        <view class="submitBtn" @click="sendSubmit" v-if="state.msgInfo?.is_res == 1  && state.orderInfo?.status < 8">发送</view>
        <view class="submitBtn editBtn" v-else>上次修改中</view>
      </view>
      <view class="msgMain" v-else-if="state.tabId == 2">
        <view class="formItem" v-for="(item, index) in state.teacherMsg"  :key="index">
          <view class="label">消息{{convertToChinese(index+1)}}</view>
          <view class="formItemRight">
            <uni-easyinput type="textarea" autoHeight :value="item" placeholder="请输入内容" :disabled="true"/>
          </view>
          <!-- <uni-icons type="minus" size="30" class="iconClose" color="rgba(254, 34, 34, 1)"></uni-icons> -->
        </view> 
        <!-- <view class="addBtn" @click="teacherAdd">+</view>
        <view class="submitBtn">发送</view> -->
      </view>
    </view>  
  </view>
  <view class="content" v-else></view>
  <TabBar :active="1"/>
</template>

<script setup>
  import { reactive } from 'vue';
  import TabBar from '@/components/tabBar.vue'
  import CommonHead from './components/head.vue'
  import CommonTitle from '@/components/commonTitle.vue'
  import { convertToChinese } from '@/utils/contanst.js'
  import { studentSendMsg, getStudentMsgList } from '@/utils/student.js'
  import { onShow }  from '@dcloudio/uni-app'
  const state = reactive({
    tabs: [{
      id: 1,
      label: '修改申请'
    }, {
      id: 2,
      label: '老师回复'
    }],
    tabId: 1,
    studentMsg:[''],
    msgInfo: {},
    orderInfo: {},
    teacherMsg: []
  })
  onShow(() => {
    getStudentMsg()
    state.orderInfo = uni.getStorageSync('orderInfo')
  })
  
  const changeInput = (e, index) => {
    console.log(70, e?.detail?.value)
    state.studentMsg[index] = e?.detail?.value
  }
  // 删除消息
  const deleteFun = (index) => {
    state.studentMsg.splice(index, 1)
    console.log(80, state.studentMsg)
  }
  const getStudentMsg = () => {
    getStudentMsgList({}).then((res) => {
      if (res?.code == 1) {
        state.msgInfo = res?.result
        state.studentMsg = res?.result?.student
        state.teacherMsg = res?.result?.teacher
      }
      
    })
  }
  const tabChange = (item) => {
    state.tabId = item.id
  }
  // 点击加号
  const studentAdd = () => {
    state.studentMsg.push('')
  }
  // 学生点击发送
  const sendSubmit = () => {
    studentSendMsg({content: state.studentMsg}).then((res) => {
      console.log(69, res)
      uni.redirectTo({
        url:'/pages/student/index'
      })
    })
  }
</script>

<style lang="scss" scoped>
  .content{
    width: 714rpx;
    height: 1100rpx;
    border-radius: 14rpx;
    background: rgba(247, 247, 247, 1);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20rpx;
    margin-bottom: 140rpx;
    overflow-y: scroll;
    .title{
      width: 564rpx;
      height: 76rpx;
      border-radius: 6rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      background: rgba(209, 243, 241, 1);
      margin-top: 30rpx;      
      .span{
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: rgba(54, 54, 54, 1);
        margin-left: 30rpx;
      }
      .span02{
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 32rpx;
        color: rgba(60, 60, 60, 1);
        margin-left: 60rpx;
      }
    }
    .line{
      border-bottom: 2rpx dashed rgba(146, 146, 146, 1);
      width: 664rpx;
      margin-top: 10rpx;
      margin-bottom: 10rpx;
    }
    .bottom{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      .tabs{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .item{
          width: 198rpx;
          height: 66rpx;
          border-radius: 8rpx;
          border: 2rpx solid rgba(172, 172, 172, 1);
          background: rgba(255, 255, 255, 1);
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: rgba(145, 145, 145, 1);
          margin-right: 30rpx;
        }
        .itemHover{
          border: 2rpx solid rgba(11, 105, 218, 1);
          color: rgba(101, 115, 233, 1);
        }
      }
      .msgMain{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top:30rpx;
        .formTitle{
          width: 100%;
          text-align: center;
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: rgba(101, 115, 233, 1);
        }
        .formItem{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin-top: 20rpx;
          .label{
            width: 90rpx;
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(122, 122, 122, 1);
            height: 100%;
          }
          .formItemRight{
            width: 444rpx;
            height: 214rpx;
            overflow: scroll;
          }
        }
        .addBtn{
          width: 362rpx;
          height: 72rpx;
          border-radius: 14rpx;
          border: 2rpx solid rgba(0, 0, 0, 0.28);
          background: rgba(231, 231, 231, 0.59);
          color: rgba(146, 146, 146, 1);
          font-size: 40rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .submitBtn{
          width: 248rpx;
          height: 74rpx;
          border-radius: 6rpx;
          background: rgba(255, 11, 11, 0.28);
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 48rpx;
          color: rgba(58, 58, 58, 0.68);
          margin-top: 40rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .editBtn{
          width: 248rpx;
          height: 74rpx;
          border-radius: 6rpx;
          background: rgba(169, 169, 169, 0.28);
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 40rpx;
          color: rgba(122, 122, 122, 1);
        }
      }
    }
  }
</style>